
import { Form, Input, Row, Col, Select, Button, Image, message } from "antd"
import "./index.scss"
import React, { Component } from 'react'
import { annoTypeList } from "../../utils";
import { baseURL } from "../../api/ajax";
import { UploadOutlined } from '@ant-design/icons';
import { ajax } from "../../api";
const { Option } = Select



export default class UpdateAnno extends Component {
    state={
        imgUrl:''
    }
    componentDidMount(){
        console.log(this.props.match.params.aid);
        ajax.getnotice({
            _id:this.props.match.params.aid
        })
        .then(res=>{
            if(res.code==200){
                this.updateForm.setFieldsValue(res.result)
                this.updateForm.setFieldsValue({category:res.result.category})
                this.setState({
                    imgUrl:res.result.img
                })
            }
        })
    }
    submitForm = (value)=>{
        ajax.updatnotice({
            ...value,
            _id:this.props.match.params.aid
        }).then(res=>{
            if(res.code==200){
                this.props.history.go(-1)
            }
        })
    }
    startSendFile = ()=>{
        var filedata = this.file.files[0]
        var data = new FormData()
        data.append("img",filedata)
        ajax.uploadfileimg(data)
        .then(res=>{
            if(res.code==200){
                this.setState({
                    imgUrl:res.result
                })
                this.updateForm.setFieldsValue({
                    img:res.result
                })
            }
        })
    }
    uploadFile = ()=>{
        this.file.click()
    }
    onFinishFailed = ()=>{
        message.error('请输入有效的通告信息');
    }
    render() {
        return (
            <div>
                <h2 style={{ marginBottom: "10px" }}>修改通告</h2>
                <Row>
                    <Col span={12}>
                        <Form
                            name="updateForm"
                            ref={el=>this.updateForm=el}
                            layout="vertical"
                            onFinish={this.submitForm}
                            onFinishFailed={this.onFinishFailed}
                            className="myannoform"
                        >
                            <Form.Item
                                label="通告标题"
                                name="title"
                                rules={[
                                    { required: true, message: '请输入' },
                                ]}
                            >
                                <Input placeholder="请输入" ></Input>
                            </Form.Item>
                            <Form.Item
                                label="通告内容"
                                name="content"
                                rules={[
                                    { required: true, message: '请输入' },
                                ]}
                            >
                                <Input.TextArea rows={6} placeholder="请输入" />
                            </Form.Item>
                            <Form.Item
                                label="通告分类"
                                name="category"
                                rules={[
                                    { required: true, message: '请选择' },
                                ]}
                            >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                >
                                    {
                                        annoTypeList.map((l, i) => (
                                            <Option value={l.type} key={i}>
                                                {l.title}
                                            </Option>
                                        ))
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                label="通告图片"
                                name="img"
                                rules={[
                                    { required: true, message: '请上传' },
                                ]}
                            >
                                {this.state.imgUrl &&
                                <Image width={'100%'} height={160} style={{ borderRadius: 8, margin: "10px 0 " }} src={this.state.imgUrl.replace(/public/, baseURL)}></Image>}
                                <input type="file" onChange={this.startSendFile} ref={el=>this.file=el} style={{ display: 'none' }} />
                                <Button icon={<UploadOutlined />} onClick={this.uploadFile}>点击添加通告图片</Button>
                            </Form.Item>

                            <Form.Item
                            >
                                <Button type="danger" htmlType="submit" style={{marginRight:'5px'}}>确认修改</Button>
                                <Button type="primary" onClick={() => this.props.history.go(-1)} >取消</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </div>
        )
    }
}
